import React, { useState } from 'react'
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';
import './Createdesign.css'
import Collectingscenes from '../Collectingscenes/Collectingscenes'
import Intelligentdesign from '../Intelligentdesign/Intelligentdesign'
import Poster from '../Poster/Poster'
import Whole from '../Whole/Whole'
import Officialaccount from '../Officialaccount/Officialaccount'
import Customsize from '../../../components/four/Customsize/Customsize'
function Createdesign() {
    const [keys, setKeys] = useState('1')
    const onChange = (key: string) => {
        console.log(key);
        setKeys(key)
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '全部',
        },
        {
            key: '2',
            label: '智能设计',
        },
        {
            key: '3',
            label: '海报',
        },
        {
            key: '4',
            label: '公众号',
        },
        {
            key: '5',
            label: '抖音/小红书',
        },
        {
            key: '6',
            label: '电商',
        },
        {
            key: '7',
            label: 'PPT/办公',
        },
        {
            key: '8',
            label: '印刷物料',
        },
        {
            key: '9',
            label: 'H5',
        },
        {
            key: '10',
            label: '社交生活',
        },
        {
            key: '11',
            label: '视频',
        },
        {
            key: '12',
            label: '插画元素',
        },
    ];
    return (
        <div className='Createdesign'>
            <div className="Createdesigntop">
                <h1>创建设计</h1>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                <Customsize/>
            </div>
            <div className="Createdesignbottom">
                <div>
                    {keys === '1' ? <div className="main">
                        <Whole/>
                    </div> : ''}
                </div>
                <div>
                    {keys === '2' ? <div className="main">
                        <Intelligentdesign/>
                    </div> : ''}
                </div>
                <div>
                    {keys === '3' ? <div className="main">
                        <Poster/>
                    </div> : ''}
                </div>
                <div>
                    {keys === '4' ? <div className="main">
                        <Officialaccount/>
                    </div> : ''}
                </div>
                <div>
                    {keys === '5' ? <div className="main">
                        555
                    </div> : ''}
                </div>
                <div>
                    {keys === '6' ? <div className="main">
                        666
                    </div> : ''}
                </div>
                <div>
                    {keys === '7' ? <div className="main">
                        777
                    </div> : ''}
                </div>
                <div>
                    {keys === '8' ? <div className="main">
                        888
                    </div> : ''}
                </div>
                <div>
                    {keys === '9' ? <div className="main">
                        999
                    </div> : ''}
                </div>
                <div>
                    {keys === '10' ? <div className="main">
                        10
                    </div> : ''}
                </div>
                <div>
                    {keys === '11' ? <div className="main">
                        11
                    </div> : ''}
                </div>
                <div>
                    {keys === '12' ? <div className="main">
                        12
                    </div> : ''}
                </div>
            </div>
        </div>
    )
}

export default Createdesign
